<template>
  <div class="pay-order">
    <BaseHeader></BaseHeader>
    <!-- LOGO 步骤條 -->
    <div class="width_1200 logo">
      <div>
        <router-link to="/"><img :src="$store.state.logoImg"/></router-link>
        <div>{{ $t('settlement.payment_page') }}</div>
      </div>
      <div class="cart-steps">
        <span :class="stepIndex == 1 ? 'active' : ''">{{ $t('cart.my_cart') }}</span>
        <Icon :class="stepIndex == 1 ? 'active-arrow' : ''" custom="icomoon icon-next"></Icon>
        <span :class="stepIndex == 1 ? 'active' : ''">{{ $t('cart.write_order') }}</span>
        <Icon :class="stepIndex == 1 ? 'active-arrow' : ''" custom="icomoon icon-next"></Icon>
        <span :class="stepIndex == 2 ? 'active' : ''">{{ $t('cart.submit') }}</span>
      </div>
    </div>
    <Divider/>
    <div class="content width_1200">
      <!-- 收貨地址 -->
      <div v-if="selectedDeliverMethod === 'LOGISTICS'" class="address">
        <div class="card-head">
          <span>{{ $t('settlement.consignee_information') }}</span>
          <span @click="goAddressManage">{{ $t('settlement.manager_address') }}</span>
        </div>
        <div class="address-manage">
          <div v-for="(item, index) in addressList" v-show="moreAddr ? true : index < 3"
               :key="index" :class="selectedAddress.id === item.id ? 'border-red' : ''"
               class="address-item" @click="selectAddress(item)" @mouseenter="showEditBtn = index"
               @mouseleave="showEditBtn = ''">
            <div>
              <span>{{ item.name }}</span>
              <Tag v-if="item.isDefault" class="ml_10" color="red">默认</Tag>
              <Tag v-if="item.alias" class="ml_10" color="warning">{{ item.alias }}
              </Tag>
            </div>
            <div>{{ item.mobile }}</div>
            <div>
              {{ item.consigneeAddressPath | unitAddress }} {{ item.detail }}
            </div>
            <div v-show="showEditBtn === index" class="edit-btn">
              <span @click.stop="editAddress(item.id)">修改</span>
              <span v-if="!item.isDefault" class="ml_10" @click.stop="delAddress(item)">删除</span>
            </div>
            <div v-show="selectedAddress.id === item.id" class="corner-icon">
              <div></div>
              <Icon type="md-checkmark"/>
            </div>
          </div>
          <div class="add-address" @click="editAddress('')">
            <Icon type="ios-add-circle-outline"/>
            <div>{{ $t('settlement.add_address') }}</div>
          </div>
        </div>
        <div v-if="addressList.length > 3" class="more-addr" @click="moreAddr = !moreAddr">
          {{ moreAddr ? "收起地址" : "更多地址" }}
          <Icon v-show="!moreAddr" type="md-arrow-dropdown"/>
          <Icon v-show="moreAddr" type="md-arrow-dropup"/>
        </div>
      </div>

      <div v-if="selectedDeliverMethod === 'SELF_PICK_UP'" class="address">
        <div class="card-head">
          <span>自提点信息</span>
        </div>
        <div class="address-manage">
          <div v-for="(item, index) in storeAddressList" v-show="storeMoreAddr ? true : index < 3"
               :key="index" :class="selectedAddress.id === item.id ? 'border-red' : ''"
               class="address-item" @click="selectStoreAddress(item)"
               @mouseenter="showEditBtn = index"
               @mouseleave="showEditBtn = ''">
            <div>
              <span>{{ item.addressName }}</span>
            </div>
            <div>{{ item.mobile }}</div>
            <div>
              {{ item.address | unitAddress }} {{ item.detail }}
            </div>
            <div v-show="selectedStoreAddress.id === item.id" class="corner-icon">
              <div></div>
              <Icon type="md-checkmark"/>
            </div>
          </div>
        </div>
        <div v-if="addressList.length > 3" class="more-addr" @click="storeMoreAddr = !storeMoreAddr">
          {{ storeMoreAddr ? "收起地址" : "更多地址" }}
          <Icon v-show="!storeMoreAddr" type="md-arrow-dropdown"/>
          <Icon v-show="storeMoreAddr" type="md-arrow-dropup"/>
        </div>
      </div>
      <div>
      </div>
      <div class="goods-content">
        <div class="card-head mt_20 mb_20">
          <span>{{ $t('settlement.distribution_mode') }}</span>
        </div>
        <div class="delivery-method">

          <div v-for="(item, index) in shippingMethod" v-show="moreAddr ? true : index < 3"
               :key="index" :class="selectedDeliverMethod === item.value ? 'border-red' : ''"
               class="method-item" @click="selectDeliverMethod(item)" @mouseenter="showEditBtn = item.value"
               @mouseleave="showEditBtn = ''">
            <div>{{ item.label }}</div>
            <div v-show="selectedDeliverMethod === item.value" class="corner-icon">
              <div></div>
              <Icon type="md-checkmark"/>
            </div>
          </div>
<!--          <div v-for="(item, index) in shippingMethod" v-show="moreAddr ? true : index < 3"-->
<!--               :key="index" class="method-item" @click="selectDeliverMethod(item)"-->
<!--               @mouseleave="showEditBtn = ''">-->
<!--            <div>自提</div>-->
<!--            <div v-show="selectedDeliverMethod === item.value" class="">-->
<!--              <div></div>-->
<!--              <Icon type=""/>-->
<!--            </div>-->
<!--          </div>-->
        </div>
      </div>
      <!-- 商品信息 -->
      <div class="goods-content">
        <div class="card-head mt_20 mb_20">
          <span>{{ $t('settlement.good_information') }}</span>
          <span @click="$router.push('/cart')">{{ $t('settlement.return_cart') }}</span>
        </div>
        <div v-for="(shop, shopIndex) in goodsList" :key="shopIndex" class="goods-msg">
          <div v-if="shop.checked">
<!--            <div class="shop-name">-->
<!--              <span>-->
<!--                <span class="hover-color" @click="goShopPage(shop.storeId)">{{-->
<!--                    shop.storeName-->
<!--                  }}</span>&nbsp;&nbsp;-->
<!--              </span>-->
<!--            </div>-->
            <div class="goods-list">
              <div v-for="(goods, goodsIndex) in shop.checkedSkuList" :key="goodsIndex" class="goods-item">
                <span class="hover-color" @click="
                  goGoodsDetail(goods.goodsSku.id, goods.goodsSku.goodsId)
                ">
                  <img :src="goods.goodsSku.thumbnail" alt=""/>
                  <span style="vertical-align: top">{{
                      goods.goodsSku.goodsName
                    }}</span>
                </span>
                <span class="goods-price">{{
                    goods.purchasePrice | unitPrice("HK$")
                  }}</span>
                <span>x{{ goods.num }}</span>
                <span>{{ goods.goodsSku.quantity > 0 ? $t('cart.has_stock') : $t('cart.no_stock') }}</span>
                <span class="goods-price">{{
                    goods.subTotal | unitPrice("HK$")
                  }}</span>
              </div>
            </div>
            <div v-if="startDate!==''" style="margin: 20px 0">
              <span style="margin-right: 20px">預約時間:</span>
              <el-date-picker
                  ref="datePicker"
                  v-model="startDate"
                  placeholder="選擇日期時間"
                  readonly
                  type="datetime">
              </el-date-picker>
            </div>
            <div class="order-mark">
              <Input v-model="shop.remark" maxlength="60" :placeholder="$t('settlement.order_message')" show-word-limit type="textarea"/>
              <span style="font-size: 12px; color: #999">{{ $t('settlement.tips_text') }}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 發票信息 -->
      <div class="invoice">
        <div class="card-head mt_20 mb_20">
          <span class="relative">{{ $t('settlement.invoice_information') }}<span class="inv-tips">
              <Icon type="ios-alert-outline"/>{{ $t('settlement.invoice_text') }}
            </span></span>
        </div>
        <div class="inovice-content">
          <span>{{ invoiceData.receiptTitle }}</span>
          <span>{{ invoiceData.receiptContent }}</span>
          <span @click="editInvoice">{{ $t('settlement.update') }}</span>
        </div>
      </div>
      <!-- 優惠碼 -->
      <div class="invoice">
        <div class="card-head mt_20 mb_20">
          <span class="relative">{{ $t('settlement.coupon') }}</span>
        </div>
        <div v-if="couponList.length === 0">{{ $t('settlement.no_coupon') }}</div>
        <ul v-else class="coupon-list">
          <li v-for="(item, index) in couponList" :key="index" class="coupon-item">
            <div class="c-left">
              <div>
                <span v-if="item.couponType === 'PRICE'" class="fontsize_12 global_color">HK$<span class="price">{{
                    item.price | unitPrice
                  }}</span></span>
                <span v-if="item.couponType === 'DISCOUNT'" class="fontsize_12 global_color"><span class="price">{{
                    item.discount
                  }}</span>折</span>
                <span class="describe">满{{ item.consumeThreshold }}元可用</span>
              </div>
              <p>使用范围：{{ useScope(item.scopeType) }}</p>
              <p>有效期：{{ item.endTime }}</p>
              <p>優惠碼：{{ item.id }}</p>
            </div>
            <img v-if="usedCouponId.includes(item.id)" alt="" class="used" src="../../assets/images/geted.png"/>
            <b></b>
            <a class="c-right" @click="inputCoupon(item.id, true)">立即使用</a>
            <a v-if="usedCouponId.includes(item.id)" class="c-right" @click="useCoupon(item.id, false)">放弃優惠</a>
            <i class="circle-top"></i>
            <i class="circle-bottom"></i>
          </li>
        </ul>
      </div>
      <!--輸入優惠碼-->
      <div>
        <el-dialog title="輸入優惠碼" :visible.sync="dialogVisible" width="30%">
          <el-input v-model="inputId" placeholder="請輸入優惠碼"></el-input>
          <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmUseCoupon">確 定</el-button>
      </span>
        </el-dialog>
      </div>
      <!-- 訂單價格 -->
      <div class="order-price">
        <div>
          <span>{{ totalNum }}{{ $t('settlement.good_price_text') }}</span><span>{{ priceDetailDTO.goodsPrice | unitPrice("HK$") }}</span>
        </div>
        <div v-if="priceDetailDTO.freightPrice > 0">
          <span>运费：</span><span>{{ priceDetailDTO.freightPrice | unitPrice("HK$") }}</span>
        </div>
        <div v-if="priceDetailDTO.discountPrice > 0">
          <span>優惠金额：</span><span>-{{ priceDetailDTO.discountPrice | unitPrice("HK$") }}</span>
        </div>
        <div v-if="priceDetailDTO.couponPrice > 0">
          <span>優惠碼金额：</span><span>-{{ priceDetailDTO.couponPrice | unitPrice("HK$") }}</span>
        </div>

        <div v-if="$route.query.way === 'POINTS'">
          <span>应付積分：</span><span class="actrual-price">{{ priceDetailDTO.payPoint }}</span>
        </div>
        <div v-else>
          <span>{{ $t('settlement.pay_price_text') }}</span><span class="actrual-price">{{
            priceDetailDTO.flowPrice | unitPrice("HK$")
          }}</span>
        </div>
      </div>
    </div>
    <!-- 底部支付栏 -->
    <div class="order-footer width_1200">
      <!--      <div class="pay ml_20" @click="pay">提交訂單</div>-->
      <div class="pay ml_20" @click="pay">{{ $t('settlement.submit') }}</div>
      <div v-if="addressList.length && selectedDeliverMethod === 'LOGISTICS'" class="pay-address">
        {{ $t('settlement.distribution_to') }}{{ selectedAddress.consigneeAddressPath | unitAddress }}
        {{ selectedAddress.detail }}&nbsp;&nbsp;收貨人：{{
          selectedAddress.name
        }}&nbsp;&nbsp;{{ selectedAddress.mobile }}
      </div>
      <div v-if="addressList.length && selectedDeliverMethod === 'SELF_PICK_UP'" class="pay-address">
        自提地点：{{ selectedStoreAddress.address }} &nbsp;&nbsp;聯系方式：{{ selectedStoreAddress.mobile }}
      </div>
    </div>
    <BaseFooter></BaseFooter>
    <!-- 添加發票模态框 -->
    <invoice-modal ref="invModal" :invoiceData="invoiceData" @change="getInvMsg"/>
    <!-- 選擇地址模态框 -->
    <address-manage :id="addrId" ref="address" @change="addrChange"></address-manage>
  </div>
</template>

<script>
import invoiceModal from "@/components/invoiceModal";
import addressManage from "@/components/addressManage";
import {delMemberAddress, memberAddress} from "@/api/address";
import {
  cartGoodsPay,
  couponNum,
  createTrade,
  selectAddr,
  selectCoupon,
  setShipMethod,
  setStoreAddressId,
  shippingMethodList,
  stock,
} from "@/api/cart";
import {getStoreAddress} from "@/api/shopentry.js"
import {canUseCouponList} from "@/api/member.js";
import i18n from "@/lang";
export default {
  i18n,
  name: "Pay",
  components: {invoiceModal, addressManage},
  data() {
    return {
      //输入优惠码
      inputId: null,
      //原来优惠码
      id:null,
      //是否可见
      dialogVisible:false,
      selectedStoreAddress: 'm',
      startDate: '',
      selectMethod: '',
      stepIndex: 1, // 顶部步骤條狀態
      invoiceAvailable: false, // 發票编辑按钮
      showEditBtn: "", // 鼠標移入显示编辑按钮
      orderMark: "", // 訂單备注
      storeMoreAddr: false,
      invoiceData: {
        // 發票數据
        receiptTitle: "个人",
        receiptContent: "不开發票",
      },
      searchForm: {
        pageNumber: 1,
        pageSize: 100
      },
      shippingMethod: [],
      storeAddressList: [],
      shippingWay: [
        {
          value: "LOGISTICS",
          label: "物流",
        },
        {
          value: "SELF_PICK_UP",
          label: "自提",
        },
      ],
      selectedDeliverMethod: 'LOGISTICS',
      addressList: [], // 地址列表
      selectedAddress: {}, // 所選地址
      goodsList: [], // 商品列表
      priceDetailDTO: {}, // 商品價格
      totalNum: 0, // 购买數量
      addrId: "", // 编辑地址傳入的id
      moreAddr: false, // 更多地址
      canUseCouponNum: 0, // 可用優惠碼數量
      couponList: [], // 可用優惠碼列表
      usedCouponId: [], // 已使用優惠碼id
      selectedCoupon: {}, // 已選優惠碼对象
      storeId: '', //店铺Id
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    // 初始化數据
    init() {
      this.getGoodsDetail();
      this.getDistribution();
      this.startDate = window.localStorage.getItem("appoint_time");
    },
    goAddressManage() {
      // 跳轉地址管理頁面
      this.$router.push("/home/MyAddress");
    },
    getAddress() {
      // 获取收貨地址列表
      memberAddress(this.searchForm).then((res) => {
        if (res.success) {
          this.addressList = res.result.records;
          this.addressList.forEach((e, index) => {
            if (e.id === this.selectedAddress.id && index > 2) {
              this.moreAddr = true;
            }
          });
        }
      });
    },
    // 获取配送方式列表
    async getDistribution() {
      let shopRes = await shippingMethodList({way: this.$route.query.way});
      let shopList;
      if (shopRes.success) {
        shopList = shopRes.result;
        let way = [];
        console.log(shopList)
        this.shippingWay.forEach((item) => {
          shopList.forEach((child) => {
            if (item.value == child) {
              way.push(item);
            }
          });
        });
        this.shippingMethod = way;
        console.log(this.shippingMethod)
      }
    },

    async getStoreAddressList() {
      getStoreAddress(this.storeId, this.searchForm).then(res => {
        if (res.success) {
          this.storeAddressList = res.result.records
          this.storeAddressList.forEach((e, index) => {
            if (e.id === this.selectedAddress.id && index > 2) {
              this.storeMoreAddr = true;
            }
          });
        }
      })
    },
    getGoodsDetail() {
      // 訂單商品詳情
      this.$Spin.show();
      cartGoodsPay({way: this.$route.query.way})
          .then((res) => {
            this.$Spin.hide();
            if (res.success) {
              if (
                  !res.result.checkedSkuList ||
                  res.result.checkedSkuList.length === 0
              ) {
                if (res.result.skuList && res.result.skuList[0]) {
                  this.$Modal.warning({
                    title: "購物車存在無效商品！",
                    content:
                        "[" +
                        res.result.skuList[0].goodsSku.goodsName +
                        "]" +
                        res.result.skuList[0].errorMessage,
                  });
                }
                this.$router.push({
                  path: "/cart",
                  replace: true,
                });
              }
              this.goodsList = res.result.cartList;
              this.priceDetailDTO = res.result.priceDetailDTO;
              this.skuList = res.result.skuList;
              this.storeId = this.goodsList[0].storeId
              if (res.result.receiptVO) {
                this.invoiceData = res.result.receiptVO;
              }
              let notSupArea = res.result.notSupportFreight;
              this.selectedCoupon = {};
              if (res.result.platformCoupon)
                this.selectedCoupon[res.result.platformCoupon.memberCoupon.id] =
                    res.result.platformCoupon;
              if (
                  res.result.storeCoupons &&
                  Object.keys(res.result.storeCoupons)[0]
              ) {
                let storeMemberCouponsId = Object.keys(
                    res.result.storeCoupons
                )[0];
                let storeCouponId =
                    res.result.storeCoupons[storeMemberCouponsId].memberCoupon.id;
                this.selectedCoupon[storeCouponId] =
                    res.result.storeCoupons[storeMemberCouponsId];
              }
              if (notSupArea) {
                let content = [];
                let title = "";
                notSupArea.forEach((e) => {
                  title = e.errorMessage;
                  content.push(e.goodsSku.goodsName);
                });
                this.$Modal.warning({
                  title: "以下商品超出配送區域" || title,
                  content: content.toString(),
                });
              }
              if (res.result.memberAddress) {
                this.selectedAddress = res.result.memberAddress;
              }
              this.getAddress();
              this.getStoreAddressList();
              this.totalNum = 0;
              for (let i = 0; i < this.skuList.length; i++) {
                this.totalNum += this.skuList[i].num;
              }
              this.usedCouponId = [];
              this.couponList = res.result.canUseCoupons;
              const couponKeys = Object.keys(this.selectedCoupon);
              if (couponKeys.length) {
                this.couponList.forEach((e) => {
                  if (
                      this.selectedCoupon[e.id] &&
                      e.id === this.selectedCoupon[e.id].memberCoupon.id
                  ) {
                    this.usedCouponId.push(e.id);
                  }
                });
                this.$nextTick(() => {
                  this.$forceUpdate();
                });
              }
            }
          })
          .catch(() => {
            this.$Spin.hide();
          });
    },
    getCouponNum() {
      // 获取可用優惠碼數量
      couponNum({way: this.$route.query.way}).then((res) => {
        this.canUseCouponNum = res.result;
        if (res.result) {
          let storeArr = [];
          let skuArr = [];
          this.goodsList.forEach((e) => {
            storeArr.push(e.storeId);
            e.skuList.forEach((i) => {
              skuArr.push(i.goodsSku.id);
            });
          });
          let params = {
            pageNumber: 1,
            pageSize: 100,
            memberCouponStatus: "NEW",
            scopeId: skuArr.toString(),
            storeId: storeArr.toString(),
            totalPrice: this.priceDetailDTO.goodsPrice,
          };
          canUseCouponList(params).then((res) => {
            // 可用優惠碼列表
            if (res.success) this.couponList = res.result.records;
            const couponKeys = Object.keys(this.selectedCoupon);
            this.usedCouponId = [];
            if (couponKeys.length) {
              this.couponList.forEach((e) => {
                if (e.id === this.selectedCoupon[couponKeys].memberCoupon.id) {
                  this.usedCouponId.push(e.id);
                }
              });
              this.$nextTick(() => {
                this.$forceUpdate();
              });
            }
          });
        }
      });
    },
    selectAddress(item) {
      // 選擇地址
      let params = {
        way: this.$route.query.way,
        shippingAddressId: item.id,
      };
      selectAddr(params).then((res) => {
        if (res.success) {
          this.$Message.success("選擇配送方式成功");
          this.selectMethod = item;
          this.getGoodsDetail();
        }
      });
    },
    selectStoreAddress(item) {
      console.log(item.id)
      console.log(this.$route.query.way)
      // 選擇自提地址
      setStoreAddressId(item.id, this.$route.query.way).then((res) => {
        if (res.success) {
          this.$Message.success("選擇自提地址成功");
          this.selectedStoreAddress = item;
          this.getGoodsDetail();
        }
      });
    },
    selectDeliverMethod(item) {
      let params = {
        way: this.$route.query.way,
        shippingMethod: item.value,
      };
      setShipMethod(params).then((res) => {
        if (res.success) {
          this.selectedDeliverMethod = item.value;
          this.getGoodsDetail();
        }
      });
    },
    editAddress(id) {
      // 编辑地址
      this.addrId = id;
      this.$refs.address.show();
    },
    addrChange() {
      // 添加，编辑地址回显
      this.getAddress();
    },
    delAddress(item) {
      // 删除地址
      this.$Modal.confirm({
        title: "提示",
        content: "你确定删除这个收貨地址",
        onOk: () => {
          delMemberAddress(item.id).then((res) => {
            if (res.success) {
              this.$Message.success("删除成功");
              this.getAddress();
            }
          });
        },
        onCancel: () => {
        },
      });
    },
    goGoodsDetail(skuId, goodsId) {
      // 跳轉商品詳情
      let routeUrl = this.$router.resolve({
        path: "/goodsDetail",
        query: {skuId, goodsId},
      });
      window.open(routeUrl.href, "_blank");
    },
    // 跳轉店铺首頁
    goShopPage(id) {
      let routeUrl = this.$router.resolve({
        path: "/Merchant",
        query: {id: id},
      });
      window.open(routeUrl.href, "_blank");
    },
    inputCoupon(id,used){
      this.id=id;
      this.dialogVisible=true;
    },
    confirmUseCoupon(){
      this.dialogVisible=false;
      if (this.id === this.inputId){
        this.useCoupon(this.id,true);
      }
      this.id=null;
      this.inputId=null;
    },
    useCoupon(id, used) {
      // 使用優惠碼
      let params = {
        way: this.$route.query.way,
        memberCouponId: id,
        used: used, // true 为使用， false为弃用
      };
      selectCoupon(params).then((res) => {
        if (res.success) this.init();
      });
    },
    editInvoice() {
      // 编辑發票信息
      this.$refs.invModal.invoiceAvailable = true;
    },
    getInvMsg(item) {
      // 获取發票信息
      if (item) {
        this.init();
        this.$refs.invModal.invoiceAvailable = false;
      }
    },

    pay() {
      // 结算
      const params = {
        client: "PC",
        remark: [],
        startDate: this.startDate,
        way: this.$route.query.way,
      };
      this.goodsList.forEach((e) => {
        if (e.remark) {
          params.remark.push({
            remark: e.remark,
            storeId: e.storeId,
          });
        }
      });
      if (!params.remark.length) delete params.remark;
      this.$Spin.show();
      createTrade(params)
          .then((res) => {
            this.$Spin.hide();
            if (res.success) {
              if (params.way === "POINTS") {
                // 積分支付不需要跳轉支付頁面
                this.$router.push("/payDone");
              } else {
                this.$router.push({
                  path: "/payment",
                  query: {orderType: "TRADE", sn: res.result.sn},
                });
              }
            }
          })
          .catch(() => {
            this.$Spin.hide();
          });
    },
    //重写支付逻辑
    pay1() {
      // 结算
      const params = {
        client: "PC",
        remark: [],
        way: this.$route.query.way,
      };
      this.goodsList.forEach((e) => {
        if (e.remark) {
          params.remark.push({
            remark: e.remark,
            storeId: e.storeId,
          });
        }
      });
      if (!params.remark.length) delete params.remark;
      stock(params).then(res => {
        if (res.code != 200) {
          this.$Message.success("购买失败，库存库存不足");
        } else {
          this.$Message.success("购买成功");
        }
      });
    },
    // 優惠碼可用范围
    useScope(type) {
      let goods = "全部商品";
      switch (type) {
        case "ALL":
          goods = "全部商品";
          break;
        case "PORTION_GOODS":
          goods = "部分商品";
          break;
        case "PORTION_GOODS_CATEGORY":
          goods = "部分分類商品";
          break;
      }
      return `${goods}可用`;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../assets/styles/coupon.scss";

.goods-msg {
  overflow: hidden;
}

/** logo start */
.logo {
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px auto 0;

  div:nth-child(1) {
    display: flex;
    justify-content: space-between;
    align-items: center;

    img {
      width: 150px;
      height: auto;
      cursor: pointer;
    }

    div:nth-child(2) {
      width: 200px;
      color: #999;
      font-size: 16px;
      margin: 0 20px;

      span {
        color: $theme_color;
      }
    }
  }
}

.cart-steps {
  height: 30px;
  display: flex;
  align-items: center;

  span {
    @include content_color($light_content_color);
    height: 30px;
    text-align: center;
    line-height: 30px;
    display: inline-block;
    padding: 0 15px;
  }

  .ivu-icon {
    @include content_color($light_content_color);
    font-size: 20px;
    margin: 0 15px;
  }

  .active {
    border-radius: 50px;
    background-color: #ff8f23;
    color: #fff;
  }

  .active-arrow {
    color: #ff8f23;
  }
}

/** logo end */
/** content start */
.content {
  margin: 20px auto;
  background-color: #fff;
  min-height: 200px;
  padding: 15px 25px;
}

.delivery-method {
  display: flex;
  flex-wrap: wrap;

  > div {
    border: 1px dotted #949494;
    width: 50px;
    height: 40px;
    margin: 20px 20px 0 0;
    padding: 10px;
    cursor: pointer;
    color: #999;
  }

  .method-item {
    position: relative;
    font-size: 12px;

    > div:nth-child(1) {
      margin-bottom: 10px;

      span {
        margin-right: 10px;
      }

      > span:nth-child(1) {
        color: #000000;
        font-size: 14px;
      }
    }

    .edit-btn {
      font-size: 12px;
      position: absolute;
      top: 15px;
      right: 20px;
      color: $theme_color;

      span:hover {
        border-bottom: 1px solid $theme_color;
      }
    }

    .corner-icon {
      position: absolute;
      right: -1px;
      bottom: -1px;

      div {
        width: 0;
        border-top: 20px solid transparent;
        border-right: 20px solid $theme_color;
      }

      .ivu-icon {
        font-size: 12px;
        position: absolute;
        bottom: 0;
        right: 1px;
        transform: rotate(-15deg);
        color: #fff;
      }
    }
  }

  .border-red {
    border-color: $theme_color;
  }
}

/** 地址管理 */
.address-manage {
  display: flex;
  flex-wrap: wrap;

  > div {
    border: 1px dotted #949494;
    width: 265px;
    height: 120px;
    margin: 20px 20px 0 0;
    padding: 10px;
    cursor: pointer;
    color: #999;
  }

  .add-address {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    .ivu-icon {
      font-size: 24px;
    }

  }

  .address-item {
    position: relative;
    font-size: 12px;

    > div:nth-child(1) {
      margin-bottom: 10px;

      span {
        margin-right: 10px;
      }

      > span:nth-child(1) {
        color: #000000;
        font-size: 14px;
      }
    }

    .edit-btn {
      font-size: 12px;
      position: absolute;
      top: 15px;
      right: 20px;
      color: $theme_color;

      span:hover {
        border-bottom: 1px solid $theme_color;
      }
    }

    .corner-icon {
      position: absolute;
      right: -1px;
      bottom: -1px;

      div {
        width: 0;
        border-top: 20px solid transparent;
        border-right: 20px solid $theme_color;
      }

      .ivu-icon {
        font-size: 12px;
        position: absolute;
        bottom: 0;
        right: 1px;
        transform: rotate(-15deg);
        color: #fff;
      }
    }
  }

  .border-red {
    border-color: $theme_color;
  }
}

/** 购买商品列表 start */
.shop-name {
  display: flex;
  justify-content: space-between;

  > span:nth-child(1) {
    font-weight: bold;

    .ivu-icon {
      color: #ff8f23;

      &:hover {
        color: $theme_color;
      }
    }
  }

  > span:nth-child(2) {
    color: #999;
    position: relative;
    display: flex;
    width: 200px;
  }

  .delivery-list {
    position: absolute;
    right: 0;
    top: 20px;
    background-color: #f3fafe;
    box-shadow: 0px 0px 5px #b9b2b2;
    display: flex;
    flex-wrap: wrap;
    width: 200px;
    min-height: 100px;
    padding: 10px;

    li {
      width: 90px;
      height: 30px;
      text-align: center;

      &:hover {
        cursor: pointer;
      }
    }
  }
}

.goods-list {
  width: 1150px;
  background-color: #f8f8f8;
  margin: 10px 0 20px 0;

  .goods-item {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    margin: 0 20px;
    border-bottom: 1px dotted #999;

    &:last-child {
      border: none;
    }

    img {
      width: 48px;
      height: 48px;
    }

    > span {
      text-align: center;
      width: 100px;
    }

    > span:nth-child(1) {
      font-size: 12px;

      flex: 1;
      text-align: left;

      > span {
        margin-left: 10px;
      }
    }

    > span:last-child {
      color: $theme_color;
      font-weight: bold;
    }

    .goods-price {
      font-size: 16px;
    }
  }
}

.order-mark {
  width: 500px;
}

/** 购买商品列表 end */
/** 發票信息 start */
.invoice {
  .inv-tips {
    position: absolute;
    border: 1px solid #ddd;
    width: 310px;
    padding: 3px;
    margin: 0 0 0 10px;
    font-size: 12px !important;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);

    &::before {
      content: "";
      display: inline-block;
      width: 12px;
      height: 17px;
      background: url(../../assets/images/arrow-left.png) 0 0 no-repeat;
      background-color: #fff;
      position: absolute;
      left: -9px;
    }

    .ivu-icon {
      color: #ff8f23;
      margin-right: 3px;
      font-size: 16px;
      font-weight: bold;
    }
  }

  .inovice-content {
    > span {
      margin-right: 10px;
    }

    > span:last-child {
      color: $theme_color;
      cursor: pointer;

      &:hover {
        border-bottom: 1px solid $theme_color;
      }
    }
  }
}

/** 發票信息 end */

/** 訂單價格 */
.order-price {
  text-align: right;
  margin-top: 30px;
  font-size: 16px;
  color: #999;

  > div > span:nth-child(2) {
    width: 130px;
    text-align: right;
    display: inline-block;
    margin-top: 10px;
  }

  .actrual-price {
    color: $theme_color;
    font-weight: bold;
    font-size: 20px;
  }
}

/** content end */
/** 底部支付栏 */
.order-footer {
  z-index: 20;
  height: 50px;
  @include background_color($light_white_background_color);
  @include title_color($title_color);
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  border-top: 1px solid #ddd;
  margin: 10px auto;

  div {
    text-align: center;
  }

  position: sticky;
  bottom: 0;

  .pay {
    background-color: $theme_color;
    width: 150px;
    font-size: 20px;
    color: #fff;
    height: 100%;
    line-height: 50px;
    cursor: pointer;
  }
}

/** 公共表頭 */
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #dddddd;
  height: 40px;

  span:nth-child(1) {
    font-size: 18px;
  }

  span:nth-child(2) {
    font-size: 12px;
    color: #438cde;
    cursor: pointer;

    &:hover {
      color: $theme_color;
    }
  }
}

.ivu-divider {
  background: $theme_color;
  height: 2px;
}

.pay-address {
  font-size: 12px;
}

.more-addr {
  cursor: pointer;
  margin-top: 10px;
  display: inline-block;
}

.coupon-item {
  width: 260px;
  height: 125px;
  margin-right: 10px;
  margin-bottom: 10px;

  .c-right {
    width: 30px;
    padding: 10px 7px;
  }

  b {
    background: url("../../assets/images/small-circle.png") top left repeat-y;
    right: 28px;
  }

  .circle-top,
  .circle-bottom {
    right: 22px;
  }

  .used {
    position: absolute;
    top: 60px;
    right: 40px;
    width: 50px;
    height: 50px;
  }
}

.coupon-list {
  max-height: 260px;
  overflow: scroll;
}
</style>
